<script setup>
import api from '../../api/concert_show.js';
import venueApi from '../../api/venue.js'; // 新增引入
import {ref,onMounted} from "vue";
import {ElMessageBox} from "element-plus";
import lodash from 'lodash'


//定义绑定的数据
//表格中的数据
const tableData=ref([]);

const total=ref(0);
//定义对话框的显示状态
const editWinVisible=ref(false);
//查询数据
const searchObj=ref({
  current:1,
  size:10,
  concertName:'',
  photo:'',
  artist:'',
  venueId:'',
  showDate:'',
  startTime:'',
  endTime:'',
  createTime:'',
  updateTime:'',

});

//要修改或者新增的数据
const obj=ref({});

const search = async ()=>{
  await loadVenues(); // 加载场馆信息
  var result=await api.page(searchObj.value);
  console.log('接口返回结果：', result);
  console.log('接口返回数据：', result.records);

  tableData.value= result.records||[];
  total.value=result.total||0;
}
// 根据状态值获取对应的文字显示
const getStatusText = (status) => {
  const statusMap = {
    0: '未开售',
    1: '售卖中',
    2: '已售罄',
    3: '已结束'
  };
  return statusMap[status] || '未知状态';
};
//页面加载后要挂载的数据
onMounted(async()=>{
  search();
});
//定义方法
const handleUploadSuccess = (response, file) => {
  obj.value.photo=response.data;
}

const handleSizeChange = () => {
  search();
}
const  handleCurrentChange= () => {
  search();
}


const handlerSearch = ()=> {
  searchObj.value.current=1;
  search();
}
const handlerAdd = async () => {
  obj.value = {
  };
  editWinVisible.value = true;
}


const editCancel = () => {
  obj.value = {};//清空数据
  editWinVisible.value = false;//关闭对话框
}
const editCommit = async () => {
  // 判断是新增还是编辑（根据是否有id判断）
  if (obj.value.id) {
    // 编辑
    await api.edit(obj.value);
  } else {
    // 新增
    await api.add(obj.value);
  }
  search(); // 刷新表格
  editWinVisible.value = false; // 关闭对话框
}

const handleEdit = (index, row) => {
  obj.value=lodash.clone(row);
  editWinVisible.value=true;
  console.log(index, row)
}
const handleDelete = (index, row) => {
  ElMessageBox.confirm(
      '确定要删除该行数据吗?',
      '删除提示',
      {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(async () => {
        api.del(row.id);
        //重新加载数据
        //设置页从第一页开始查询
        searchObj.value.current=1;
        search();
      })

      .catch(() => {

      })
}
// 新增场馆列表数据
const venueList = ref([]);

// 获取所有场馆信息
const loadVenues = async () => {
  try {
    const result = await venueApi.page({current: 1, size: 9999}); // 获取所有场馆
    venueList.value = result.records || [];
  } catch (error) {
    console.error('获取场馆列表失败:', error);
  }
};

// 根据ID获取场馆名称
const getVenueNameById = (venueId) => {
  if (!venueId) return '';
  const venue = venueList.value.find(item => item.id == venueId);
  return venue ? venue.venueName : venueId;
};

</script>
<template>
<!--  <div style="margin-top: 110px;">-->

<!--    <el-card class="form-container">-->
<!--      <el-form :inline="true" :model="searchObj" class="demo-form-inline" style="margin-top: 10px;">-->
<!--        <el-form-item label="演唱会名称">-->
<!--          <el-input v-model="searchObj.concertName" placeholder="请输入演唱会名称" clearable />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="艺术家">-->
<!--          <el-input v-model="searchObj.artist" placeholder="请输入艺术家" clearable />-->
<!--        </el-form-item>-->
<!--&lt;!&ndash;        <el-form-item label="场馆ID">&ndash;&gt;-->
<!--&lt;!&ndash;          <el-input v-model="searchObj.venueId" placeholder="请输入场馆ID" clearable />&ndash;&gt;-->
<!--&lt;!&ndash;        </el-form-item>&ndash;&gt;-->
<!--&lt;!&ndash;        <el-form-item label="演出日期">&ndash;&gt;-->
<!--&lt;!&ndash;          <el-input v-model="searchObj.showDate" placeholder="请输入演出日期" clearable />&ndash;&gt;-->
<!--&lt;!&ndash;        </el-form-item>&ndash;&gt;-->
<!--&lt;!&ndash;        <el-form-item label="开始时间">&ndash;&gt;-->
<!--&lt;!&ndash;          <el-input v-model="searchObj.startTime" placeholder="请输入开始时间" clearable />&ndash;&gt;-->
<!--&lt;!&ndash;        </el-form-item>&ndash;&gt;-->
<!--&lt;!&ndash;        <el-form-item label="结束时间">&ndash;&gt;-->
<!--&lt;!&ndash;          <el-input v-model="searchObj.endTime" placeholder="请输入结束时间" clearable />&ndash;&gt;-->
<!--&lt;!&ndash;        </el-form-item>&ndash;&gt;-->
<!--      </el-form>-->

<!--      <el-form :inline="true" style="display: flex; justify-content: center; gap: 20px;">-->
<!--        <el-form-item>-->
<!--          <el-button type="primary" @click="handlerSearch">查询</el-button>-->
<!--        </el-form-item>-->
<!--        <el-form-item>-->
<!--          <el-button type="primary" @click="handlerAdd">新添</el-button>-->
<!--        </el-form-item>-->
<!--      </el-form>-->
<!--    </el-card>-->
<!--  </div>-->

  <div style="margin-top: 110px;">
    <el-card class="form-container">
      <el-form :inline="true" :model="searchObj" class="demo-form-inline" style="margin-top: 20px;margin-left: 10px">
        <el-row :gutter="20" align="middle">
          <el-col :span="7" style="text-align: right;">
            <el-form-item label="演唱会名称">
              <el-input v-model="searchObj.concertName" placeholder="请输入演唱会名称" clearable />
            </el-form-item>
          </el-col>

          <el-col :span="8" style="text-align: right;">
            <el-form-item label="艺术家">
              <el-input v-model="searchObj.artist" placeholder="请输入艺术家" clearable />
            </el-form-item>
          </el-col>

          <el-col :span="12" style="text-align: right;" :offset="0">
            <el-form-item>
              <el-button type="primary" @click="handlerSearch">查询</el-button>
            </el-form-item>
          </el-col>

          <el-col :span="11" style="text-align: left;" :offset="0">
            <el-form-item>
              <el-button type="primary" @click="handlerAdd">新添</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>

  <el-card class="table-container">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="序号" width="180">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span style="margin-left: 10px">{{ scope.row.id }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="演唱会名称" width="180">
        <template #default="scope">
          <el-popover effect="light" trigger="hover" placement="top" width="auto">
            <template #reference>
              <el-tag>{{ scope.row.concertName }}</el-tag>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="艺术家" width="180">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span style="margin-left: 10px">{{ scope.row.artist }}</span>
          </div>
        </template>
      </el-table-column>
<!--      <el-table-column label="场馆ID" width="180">-->
<!--        <template #default="scope">-->
<!--          <div style="display: flex; align-items: center">-->
<!--            <span style="margin-left: 10px">{{ scope.row.venueId }}</span>-->
<!--          </div>-->
<!--        </template>-->
<!--      </el-table-column>-->
      <!-- 将原来的场馆ID列替换为以下内容 -->
      <el-table-column label="场馆" width="180">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span style="margin-left: 10px">{{ getVenueNameById(scope.row.venueId) }}</span>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="照片" width="300">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <img :src="scope.row.photo" width="200" height="200">
          </div>
        </template>
      </el-table-column>
      <el-table-column label="演出日期" width="180">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span style="margin-left: 10px">{{ scope.row.showDate }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="开始时间" width="180">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span style="margin-left: 10px">{{ scope.row.startTime }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="结束时间" width="180">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span style="margin-left: 10px">{{ scope.row.endTime }}</span>
          </div>
        </template>
      </el-table-column>
<!--      <el-table-column label="状态" width="180">-->
<!--        <template #default="scope">-->
<!--          <div style="display: flex; align-items: center">-->
<!--            <span style="margin-left: 10px">{{ scope.row.status }}</span>-->
<!--          </div>-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column label="状态" width="180">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span style="margin-left: 10px">{{ getStatusText(scope.row.status) }}</span>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="处理按钮">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
            编辑
          </el-button>
          <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination
          v-model:current-page="searchObj.current"
          v-model:page-size="searchObj.size"
          :page-sizes="[10, 20, 30, 50]"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
  </el-card>

  <!-- 编辑对话框 -->
  <el-dialog v-model="editWinVisible" :title="obj.id ? '编辑' : '新增'" width="500">
    <el-form :model="obj">
      <el-form-item label="演唱会名称" :label-width="100">
        <el-input v-model="obj.concertName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="艺术家" :label-width="100">
        <el-input v-model="obj.artist" autocomplete="off" />
      </el-form-item>
      <el-form-item label="场馆ID" :label-width="100">
        <el-input v-model="obj.venueId" autocomplete="off" />
      </el-form-item>
      <el-form-item label="图片" :label-width="100">
        <el-upload
            class="avatar-uploader"
            action="/activity/upload/file"
            :show-file-list="false"
            :on-success="handleUploadSuccess"
        >
          <img  v-if="obj.photo" :src="obj.photo"  style="width:100px" />
          <img  v-else src='@/assets/upload.png'  style="width:100px"/>
        </el-upload>
      </el-form-item>
      <el-form-item label="演出日期" :label-width="100">
        <el-input v-model="obj.showDate" autocomplete="off" />
      </el-form-item>
<!--      <el-form-item label="开始时间" :label-width="100">-->
<!--        <el-input v-model="obj.startTime" autocomplete="off" />-->
<!--      </el-form-item>-->
<!--&lt;!&ndash;      <el-form-item label="开始时间" :label-width="100">&ndash;&gt;-->
<!--&lt;!&ndash;        <div class="demo-datetime-picker">&ndash;&gt;-->
<!--&lt;!&ndash;          <div class="block">&ndash;&gt;-->
<!--&lt;!&ndash;            <span class="demonstration"></span>&ndash;&gt;-->
<!--&lt;!&ndash;            <el-date-picker&ndash;&gt;-->
<!--&lt;!&ndash;                v-model="obj.startTime"&ndash;&gt;-->
<!--&lt;!&ndash;                type="datetime"&ndash;&gt;-->
<!--&lt;!&ndash;                placeholder="Select date and time"/>&ndash;&gt;-->
<!--&lt;!&ndash;          </div>&ndash;&gt;-->
<!--&lt;!&ndash;        </div>&ndash;&gt;-->
<!--&lt;!&ndash;      </el-form-item>&ndash;&gt;-->
<!--      <el-form-item label="结束时间" :label-width="100">-->
<!--        <el-input v-model="obj.endTime" autocomplete="off" />-->
<!--      </el-form-item>-->
      <el-form-item label="开始时间" :label-width="100">
        <el-date-picker
            v-model="obj.startTime"
            type="datetime"
            value-format="YYYY-MM-DD HH:mm:ss"
            placeholder="请选择开始时间"    style="width: 100%"
        />
      </el-form-item>

      <el-form-item label="结束时间" :label-width="100">
        <el-date-picker
            v-model="obj.endTime"
            type="datetime"
            value-format="YYYY-MM-DD HH:mm:ss"
            placeholder="请选择结束时间"    style="width: 100%"
        />
      </el-form-item>
<!--      <el-form-item label="状态" :label-width="100">-->
<!--        <el-input v-model="obj.status" autocomplete="off" />-->
<!--      </el-form-item>-->
        <el-form-item label="状态" :label-width="100">
          <el-select v-model="obj.status" placeholder="请选择状态">
            <el-option label="未开售" :value="0"></el-option>
            <el-option label="售卖中" :value="1"></el-option>
            <el-option label="已售罄" :value="2"></el-option>
            <el-option label="已结束" :value="3"></el-option>
          </el-select>
        </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="editCancel">取消</el-button>
        <el-button type="primary" @click="editCommit">提交</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>/* 表单容器样式 */
.form-container {
  margin: 0 20px 20px 20px;
  border-radius: 6px;
  overflow: hidden;
}

/* 表格容器样式 */
.table-container {
  margin: 0 20px 20px 20px;
  border-radius: 6px;
  overflow: hidden;
  height: auto;
}

/* 分页容器样式 */
.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
  padding-right: 10px;
}
</style>